<template>
	<view class="list" :style="{gridTemplateColumns: `repeat(${lineNum},1fr)`}">
		<view v-for="(item,index) in data" :key="index">
			<view class="view_box_1">
				<view class="view_box">
					<view class="item_box_2" v-if="index%4 != 0?index%4 != 1?false:true:true">
						<view class="up-view-text">{{item.name!=''&&item.name!=null?item.name:'-'}}</view>
						<view class="down-view-text">{{item.title}}</view>
					</view>
					<view class="item_box" v-else>
						<view class="up-view-text">{{item.name!=''&&item.name!=null?item.name:'-'}}</view>
						<view class="down-view-text">{{item.title}}</view>
					</view>

					<view class="line-2" v-if="index%4 != 3"></view>
				</view>

			</view>
			<view lass="line-1" v-if="index%4 == 3"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "carinfo",
		props: {
			/**
			 * 每行显示几个按钮
			 */
			lineNum: {
				type: Number,
				default: 4
			},
			/**
			 * 按钮数组
			 * [{title:'标题',name:'标题内容'}]
			 */
			data: {
				type: Array,
				default: []
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.active {
		width: 15rpx;
		height: 15rpx;
		border-radius: 15rpx;
		border-width: 2rpx;
		background-color: indianred;
	}

	.list {
		display: grid;
	}

	.item {
		display: flex;
	}

	.item_box {
		flex: 1;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.item_box_2 {
		flex: 1.4;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.view_box {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.up-view-text {
		text-align: center;
		word-break: break-all;
		font-weight: bolder;

		overflow: hidden; //语句不显示超过对象尺寸的内容，就是把超出的部分隐藏了；
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;

		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #000126;
		opacity: 1;
	}

	.down-view-text {
		text-align: center;
		word-break: break-all;
		width: auto;
		margin: 5rpx 0rpx 20rpx 0rpx;

		font-size: 20rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #1D212539;
	}

	.line-1 {
		width: 530rpx;
		height: 3rpx;
		border: 1rpx solid #000000;
		background-color: #000000;
	}

	.line-2 {
		width: 0rpx;
		height: 34rpx;
		border: 1rpx solid #00000007;
	}
</style>